<template>
  <div class="tree-box"
    :style="{height:showSearch?'100%': 'auto'}">
    <div class="search-box"
      v-if="showSearch">
      <el-input
        type="text"
        v-model.trim="searchTagName"
        placeholder="请输入标签名称">
      </el-input>
      <span
        class="search-btn"
        @click="handleClick()">搜索</span>
    </div>
    <div
      class="column-start-center reTree_box"
      :style="{height:showSearch?'calc(100% - 40px)': '100%',fontSize: (size||14) +'px',lineHeight:(size||14) +'px'}">
      <div
        class="column-start-center basic_layer"
        v-for="(item,index) in formatData"
        :key="index">
        <div
          class="row-flex-start basic_banner"
          :class="{
            // 'active_color': (item.expand || item.expand && item.children.length>0)
            'active_color': item.isActive
          }">
          <div
            class="reTree_icon iconfont"
            v-show="item.children.length"
            :style="{height: (size||14*1.2 )+'px',width: (size||14*1.2) +'px', fontSize: pIconSize, marginTop: '2px'}"
            v-html='parentIcon'
            @click='expendItem(item)'>
            <!-- <img v-show='!item.expand' class='icon_img' src="@/assets/img/ic_collapse_show.png"> -->
            <!-- <img v-show='item.expand' class='icon_img' src="@/assets/img/ic_collapse_hide.png"> -->
          </div>
          <div
            v-show="!item.children.length"
            class="reTree_icon iconfont"
            @click='expendItem(item)'
            v-html='sonIcon'
            :style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px', fontSize: sIconSize}"
          ></div>
          <div class="layer_text nowrap" @click="itemClick(item, formatData)">{{item[props.label]}}</div>
        </div>
        <lineItem
          :props='props'
          :keyName="keyName"
          v-if="item.expand&&item.children.length>0"
          v-on="$listeners"
          :parentIcon='parentIcon'
          :pIconSize='pIconSize'
          :sIconSize='sIconSize'
          :sonIcon='sonIcon'
          :list="item.children"
          :size="size"
          :pd='pd'>
        </lineItem>
      </div>
    </div>
  </div>
</template>
<script>
import lineItem from './lineItem.vue'
export default {
  inheritAttrs: false,
  props: {
    pd: {},
    // 是否显示搜索框
    showSearch: {
      type: Boolean,
      default: false
    },
    size: {
      type: Number,
      default: 14
    },
    parentIcon: {
      type: String,
      default: '&#xe6c8;'
    },
    // 父级icon的大小
    pIconSize: {
      type: String,
      default: '13px'
    },
    // 子级icon的大小
    sIconSize: {
      type: String,
      default: '13px'
    },
    sonIcon: {
      type: String,
      default: '&#xe6b9;'
    },
    'expandedAll': {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: function () {
        return {
          label: 'label',
          children: 'children'
        }
      }
    },
    keyName: {
      type: String,
      default: 'id'
    }
  },
  components: { lineItem },
  data () {
    return {
      // 搜索标签名获取标签数据
      searchTagName: '',
      currTagInfo: null,
      selectedDetail: {},
      timer: {},
      formatData: []
    }
  },
  watch: {
    pd (n, o) {
      this.formatData = this.preDealData(n)
      if (this.expandedAll) {
        this.expenedNode()
      }
    }
  },
  created () {
    this.preDealData(this.pd)
  },
  methods: {
    handleClick () {
      if (this.searchTagName) {
        // 递归查找到标签名对应的标签信息
        this.filterTagInfo(this.pd, this.searchTagName)
        console.log('currTagInfo: ', this.currTagInfo)
        // 查得到做处理
        if (this.currTagInfo) {
          this.updateActiveId(this.pd, this.currTagInfo[this.keyName])
          this.$emit('itemClick', this.currTagInfo, this.formatData)
        }
      } else {
        this.updateActiveId(this.pd, this.pd[0][this.keyName])
        this.$emit('itemClick', this.pd[0], this.formatData)
      }
    },
    expenedNode () {
      this.formatData.forEach(item => {
        item.expand = true
        if (item.children) {
          item.children.forEach(i => {
            i.expand = true
          })
        }
      })
    },
    filterTagInfo (tree, tagName) {
      tree.forEach(item => {
        if (item.labelName === tagName) {
          this.currTagInfo = item
        }
        if (item.children && item.children[0]) {
          this.filterTagInfo(item.children, tagName)
        }
      })
    },
    updateActiveId (tree, id) {
      tree.forEach(item => {
        if (item[this.keyName] === id) {
          this.$set(item, 'isActive', true)
        } else {
          this.$set(item, 'isActive', false)
        }
        if (item.children && item.children[0]) {
          this.updateActiveId(item.children, id)
        }
      })
    },
    expendItem (item) {
      // item.expand = !item.expand
      let expend = item.expand
      this.$set(item, 'expand', !expend)
    },
    preDealData (list) {
      list.forEach(x => {
        if (!x.expand) this.$set(x, 'expand', false)
        if (x.children && x.children.length > 0) this.preDealData(x.children)
      })
      return list
    },
    // 根据id展开树的具体项
    expandTreeItemById (idList) {
      let _this = this
      function loopTree (list) {
        list.forEach(x => {
          if (idList.includes(x.id)) {
            _this.$set(x, 'expand', true)
          } else {
            _this.$set(x, 'expand', false)
          }
          if (x.children && x.children.length > 0) loopTree(x.children)
        })
        return list
      }
      this.formatData = loopTree(this.pd)
    },
    itemClick (item, list) {
      this.updateActiveId(this.pd, item[this.keyName])
      this.$emit('itemClick', item, list)
      // if (item.expand) {
      //   item.expand = !item.expand
      //   return
      // }
      // list.forEach(item => {
      //   item.expand = false
      // })
      // item.expand = !item.expand
      // this.$emit('itemClick', item, list)
    },
    // 详情点击
    detailClick (data) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.selectedDetail = data
        this.$emit('detailClick', data)
      }, 300)
    },
    detailDoubleClick (data) {
      clearTimeout(this.timer)
      this.selectedDetail = data
      this.$emit('detailDoubleClick', data)
    }
  }
}
</script>
<style lang="stylus" scoped>
.tree-box
  .search-box
    display flex
    align-items center
    margin-bottom 10px
    >>> .el-input
      width 150px
      .el-input__inner
        height 30px
        line-height 30px
    .search-btn
      width 42px
      height 30px
      line-height 30px
      text-align center
      font-size 12px
      color #3496ff
      // background #3496ff
      // color #fff
      // border-radius 4px
      cursor pointer
      margin-left 8px
.active_color{
    color: #409EFF;
}
.reTree_box {
  overflow-y: auto;
  width 100%
  scroll()
}
.reTree_icon {
  width: 17px;
  height: 17px;
  margin-right: 10px;
  .icon_img {
    position relative
    top -1px
    left 2px
    display block
    width 100%
    height 100%
  }
}

.basic_layer {
  width: 100%;
  position: relative;
  color: #606764;
  cursor: pointer;
  .layer_text {
    flex: 1;
    line-height 16px
    font-size 14px
    word-break break-all
  }
}
.first_vertical_line {
  content: "";
  position: absolute;
  width: 1px;
  left: 6px;
  top: 17px;
  background: #c3c5c8;
}
.basic_banner {
  position: relative;
  width: 100%;
  display flex
  padding-bottom: 13px;
}
.second_layer {
  position: relative;
  width: 100%;
  cursor: pointer;
  padding-left: 25px;
  box-sizing border-box
}
.third_layer {
  position: relative;
  padding-bottom: 15px;
  width: 100%;
  padding-left: 40px;
  color: #999999;
}

.second_layer::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 16px;
  left: 9px;
  top: 9px;
  background: #c3c5c8;
}
.third_layer::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 20px;
  left: 9px;
  top: 9px;
  background: #c3c5c8;
}

.linkLine_default::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  left: 9px;
  top: 0px;
  background: #c3c5c8;
}
.linkLine_first::after {
  content: "";
  position: absolute;
  /* 为了触顶 */
  top: -14px;
  height: calc(100% + 14px);
  width: 1px;
  left: 9px;
  background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
  content: "";
  position: absolute;
  height: 24px;
  top: -14px;
  width: 1px;
  left: 9px;
  background: #c3c5c8;
}
.linkLine_last::after {
  content: "";
  position: absolute;
  height: 9px;
  width: 1px;
  left: 9px;
  top: 0px;
  background: #c3c5c8;
}
.reTree_collapse_icon {
  background: url("~assets/img/ic_text_justify@2x.png") no-repeat center center;
  background-size: contain;
}

.reTree_default_icon {
  background: url("~assets/img/ic_text_justify@2x.png") no-repeat center center;
  background-size: contain;
}

.reTree_expand_icon {
  background: url("~assets/img/ic_text_justify@2x.png") no-repeat center center;
  background-size: contain;
}

.reTree_focus_icon {
  background: url("~assets/img/ic_text_justify@2x.png") no-repeat center center;
  background-size: contain;
}
</style>
